import React from 'react'
import {
  Card,
  Table,
  Button,
  Modal,
  message,
  Alert
} from 'antd'
import axios from '../../axios'
import Utils from './../../utils/utils';

export default class BasicTabel extends React.Component {
  constructor(props) {
    super();
    this.state = {
      dataSource2: [],
      params: {
        page: 1
      }
    }
  }
  componentDidMount() {
    const dataSource = [{
      id: '0',
      userName: 'lx',
      sex: '1',
      state: '2',
      interest: '1',
      birthday: '2000-01-01',
      address: '北京市海淀区奥林匹克公园',
      time: '09:00'
    },
    {
      id: '1',
      userName: '张三',
      sex: '1',
      state: '2',
      interest: '1',
      birthday: '2000-01-01',
      address: '北京市海淀区奥林匹克公园',
      time: '09:00'
    },
    {
      id: '2',
      userName: '李四',
      sex: '1',
      state: '3',
      interest: '3',
      birthday: '2000-01-01',
      address: '北京市海淀区奥林匹克公园',
      time: '09:00'
    }
    ]
    dataSource.map((item, i) => {
      return item.key = i
    })
    this.request();
    this.setState({
      dataSource
    })
  }

  onRowClick = (record, index) => {
    let selectKey = [index];
    Modal.info({
      title: '信息',
      content: `用户名：${record.userName},用户爱好：${record.interest}`
    })
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    })
  }

  // 多选执行删除动作
  handleDelete = () => {
    let rows = this.state.selectedRows;
    console.log(rows)
    let ids = [];
    if (rows) {
      rows.map((item) => {
        return ids.push(item.id)
      })
      Modal.confirm({
        title: '删除提示',
        content: `您确定要删除这些数据吗？${ids.join(',')}`,
        onOk: () => {
          message.success('删除成功');
          this.request();
        }
      })
    } else {
      message.warning('请选择')
    }
  }

  //动态获取mock数据
  request = () => {
    let _this = this;
    axios.ajax({
      url: '/table/list',
      data: {
        params: {
          page: this.state.params.page
        }
      }
    }).then((res) => {
      if (res.code === 0) {
        res.result.list.map((item, index) => {
          return item.key = index;
        })
        this.setState({
          dataSource2: res.result.list,
          selectedRowKeys: [],
          selectedRows: null,
          pagination: Utils.pagination(res, (current) => {
            _this.state.params.page = current;
            this.request();
          })
        })

      }
      console.log(this.state.pagination)
    })
  }


  render() {
    const columns = [{
      title: 'id',
      dataIndex: 'id'
    },
    {
      title: '用户名',
      dataIndex: 'userName'
    },
    {
      title: '性别',
      dataIndex: 'sex',
      render(sex) {
        return sex === '1' ? '男' : '女'
      }
    },
    {
      title: '状态',
      dataIndex: 'state',
      render(state) {
        let config = {
          '1': '咸鱼一条',
          '2': '风华浪子',
          '3': '北大才子',
          '4': '百度FE',
          '5': '创业者'
        }
        return config[state];
      }
    },
    {
      title: '爱好',
      dataIndex: 'interest',
      render(abc, c, v) {
        let config = {
          '1': '游泳',
          '2': '打篮球',
          '3': '踢足球',
          '4': '跑步',
          '5': '爬山',
          '6': '骑行',
          '7': '桌球',
          '8': '麦霸'
        }
        return config[abc];
      }
    },
    {
      title: '生日',
      dataIndex: 'birthday'
    },
    {
      title: '地址',
      dataIndex: 'address'
    },
    {
      title: '早起时间',
      dataIndex: 'time'
    },
    ]

    const selectedRowKeys = this.state.selectedRowKeys;
    const rowSelection = {
      type: 'radio',
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys,
          selectedRows
        })
      }
    }
    const rowCheckSelection = {
      type: 'checkbox',
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys,
          selectedRows
        })
      }
    }

    return (
      <div style={{ width: 100 + '%' }}>
        <Card title="基础表格">
          <Table columns={columns} dataSource={this.state.dataSource} bordered rowKey={(i) => i.id} />
        </Card>

        <Card title="动态表格" style={{ marginTop: 10 }} >
          <Table columns={columns} dataSource={this.state.dataSource2} bordered />
        </Card>


        <Card title="Mock-单选" style={{ margin: '10px 0' }}>
          <Table
            bordered
            rowSelection={rowSelection}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.onRowClick(record, index);
                }
              };
            }}
            columns={columns}
            dataSource={this.state.dataSource}
            pagination={false}
          />
        </Card>


        <Card title="Mock-多选" style={{ margin: '10px 0' }}>
          <div style={{ marginBottom: 10 }}>
            <Button onClick={this.handleDelete}>删除</Button>
          </div>
          <Table
            bordered
            rowSelection={rowCheckSelection}
            columns={columns}
            dataSource={this.state.dataSource}
            pagination={false}
          />
        </Card>

        <Card title="Mock-表格分页" style={{ margin: '10px 0' }}>
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={this.state.pagination}
          />
        </Card>
      </div >
    )
  }
}